<template>
  <div class="product-detail">
    <!-- 导航栏 -->
    <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 商品轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="商品图片" class="swipe-image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品信息 -->
    <van-card
        :num="parseInt(data.fenleiShangpin.shuliang)"
        :price="parseInt(data.fenleiShangpin.jiage).toFixed(2)"
        :desc="data.fenleiShangpin.fenlei"
        :title="data.fenleiShangpin.name"
        :thumb="data.fenleiShangpin.img"
    >
      <template #tags>
        <van-tag plain type="danger">新品</van-tag>
        <van-tag plain type="success">推荐</van-tag>
      </template>
    </van-card>

    <!-- 商品规格/详情 Tabs -->
    <van-tabs v-model:active="activeTab">
      <van-tab title="详情">
        <div class="detail-content">
          <p >再在</p>
        </div>
      </van-tab>
      <van-tab title="参数">
        <div class="params">
          <p>品牌：正地饲料</p>
          <p>产地：内蒙古通辽市正地饲料</p>
          <p>保质期：3个月</p>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="reviews">
          <p>暂无评价</p>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部操作按钮 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="addKefu" />
      <van-action-bar-icon icon="cart-o" :badge="data.gouwucheshuliang" to="/manager/cart" text="购物车" />
      <van-action-bar-icon v-if="data.shoucang" icon="star" text="已收藏" color="#ff5000" @click="addShoucang" />
      <van-action-bar-icon v-else="data.shoucang" icon="star-o" text="收藏" color="#ff5000" @click="addShoucang" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addToCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
    </van-action-bar>
  </div>
</template>
<script setup>
import {
  reactive,
  ref,
} from 'vue';
import router from "@/router/index.js";
import request from "@/utils/request.js";
import { useRoute } from 'vue-router'
import {showNotify, showToast} from "vant";

const route = useRoute()
const data = reactive({
  shangpinid: route.params.id,
  user:JSON.parse(localStorage.getItem('code_user') || '{}'),
  fenleiShangpin: {},
  gouwucheshuliang: 0,
  goumaishuliang: 1,
  shoucang: false,
})
const onClickLeft = () => {
  // 方式一：返回上一页
  router.back()

  // 方式二：跳转到指定页面，例如分类页
  // router.push('/category')
}
const activeTab = ref(0);
const images = [
  'https://www.dowebok.com/demo/5510/images/02.jpg',
  'https://www.dowebok.com/demo/5510/images/01.jpg',
  'https://www.dowebok.com/demo/5510/images/05.jpg',
];

// 加入购物车
const addToCart = () => {
  if(data.user.id) {
    console.log('加入购物车', data.shangpinid, data.user.id);
    // 这里可以调用 API 或触发 Vuex action
    request.post('gouwuche/add', {
      shangpinId: parseInt(data.shangpinid),
      userId: data.user.id,
      goumaishuliang: data.goumaishuliang,
    }).then(res => {
      console.log(res);
      showToast('添加成功');
      loadCartList()
      // ElMessage.success(res.msg);
    }).catch(err => {
      // ElMessage.error(err);
      showNotify({type: 'danger', message: err});
    });
  }else {
    location.href = '/login'
  }
};

// 立即购买
const buyNow = () => {
  console.log('立即购买');
  // 跳转到下单页面或弹出确认框
  showNotify({type: 'warning', message: '功能暂未实现，敬请谅解'});
};
const addShoucang = () => {
  if(!data.shoucang){
    console.log('加入收藏', data.shangpinid, data.user.id, data.shoucang);
    request.post('shoucang/add', {
      shangpinId: parseInt(data.shangpinid),
      userId: data.user.id,
    }).then(res => {
      console.log(res);
      showToast('收藏成功');
      // ElMessage.success(res.msg);
    }).catch(err => {
      // ElMessage.error(err);
      showNotify({type: 'danger', message: err});
    });
  }else {
    console.log('删除 收藏', data.shangpinid, data.user.id, data.shoucang);
    request.post('shoucang/delete', {
      shangpinId: parseInt(data.shangpinid),
      userId: data.user.id,
    }).then(res => {
      console.log(res);
      showToast('取消收藏');
      // ElMessage.success(res.msg);
    }).catch(err => {
      // ElMessage.error(err);
      showNotify({type: 'danger', message: err});
    });
  }
  data.shoucang = !data.shoucang

  // showNotify({type: 'warning', message: '功能暂未实现，敬请谅解'});
};
const addKefu = () => {
  console.log('客服');
  // 跳转到客服页面或弹出确认框
  showNotify({type: 'warning', message: '功能暂未实现，敬请谅解'});
};
const load = () => {
  // 加载商品详情数据
  request.get('shangpinxiangqing/selectPage', {
    params: {
      id: data.shangpinid
    }
  }).then(res => {
    data.fenleiShangpin = res.data.list[0];
  }).catch(err => {
    ElMessage.error(err);
  });
  request.get('shoucang/selectAll', {
    params: {
      userId: data.user.id,
      shangpinId: data.shangpinid
    }
  }).then(res => {
    res.data.forEach(item => {
      if (item.shangpinId == data.shangpinid) {
        data.shoucang = true
      }
    })
  })
};
const loadCartList = () => {
  if (data.user.id) {
    request.get('gouwuche/selectAll', {
      params: {
        userId: data.user.id
      }
    }).then(res => {
      data.gouwucheshuliang = res.data.length
    }).catch(err => {
      showNotify({ type: 'danger', message: err });
    })
  }
}
loadCartList()
load();
</script>
<style scoped>
/*.van-nav-bar {
  height: 46px;
  font-size: 16px;
}*/
.van-nav-bar__title {
  font-weight: bold;
}
.swipe-image {
  width: 100%;
  height: auto;
}

.detail-content, .params, .reviews {
/*  padding: 15px;
  font-size: 14px;*/
  color: #666;
}
</style>
